<template>
  <div class="home">
    <div class="tips" v-show="tipsShow">
      <div class="clarity"></div>
      <div class="tips-con">
        <div class="tips-header">提示</div>
        <div class="tips-body">登陆已过期，请重新登陆!</div>
        <div class="tips-footer">
          <button class="confirm-btn" @click="goToLogin()">确定</button>
        </div>
    </div>
    </div>
    <div class="header">
      <span class="name">{{user_name}}</span>
      <span class="out" @click="logOut()">退出</span>
    </div>
    <modal v-if = "dataInfo.ok" :dataInfo = "this.dataInfo" :items="this.items" @ievent="ievent"></modal>
    <div class="content-con">
      <div class="option-con">
        <span class="select-title">客户名称：</span>
        <select class="client-con" @change="selectClient()" v-model="selected">
          <option v-for="select in clients" :value="select">{{select}}</option>
        </select>
        <div class="btn-con"><button class="add-con" @click="add()">添加</button></div>
      </div>
      <div class="content">
        <table>
          <tr class="table-title">
            <!--<td>序号</td>-->
            <th>类型</th>
            <th>源头</th>
            <th>状态</th>
            <th colspan="2">操作</th>
          </tr>
          <tr class="table-content" v-for="item in items">
            <!--<td>{{item.id_action}}</td>-->
            <td>{{item.sync_type}}</td>
            <td>{{item.sync_source}}</td>
            <td>{{item.activated}}</td>
            <td @click="update(item)"><span class="update">修改</span></td>
            <td @click="cancel(item)"><span class="cancel">删除</span></td>
          </tr>
        </table>
      </div>
    </div>
    
    
  </div>
</template>

<script>
  import baseUrl from '../../static/address.js'

  import modal from '../components/modal.vue'
  export default {
    name: 'home',
    data() {
      return {
        user_name: '',
        clients: ["ht"],
        selected: 'ht',
        dataInfo: {ok:false},
        items: [],
        tipsShow: false,
        token:''
      }
    },

    components: {
      modal
    },
    methods: {
      selectClient() {
        // console.log(this.selected);
        this.getContent();
      },
      logOut() {
        this.$router.push({
          name: 'login'
        })
      },
      getContent() {
        this.token = localStorage.getItem('token');
        console.log('token',this.token);
        // console.log('selected',this.selected)
        this.$axios.get(baseUrl.host + '/admin/'+this.selected + '/actions',{
          headers: {
            "x-access-token": this.token
          }
        }).then((res)=>{
          console.log('res',res)
          this.items = res.data.items
        }).catch((err)=>{
          this.tipsShow = true;
          console.log(err)
        })
      },

      goToLogin() {
        this.$router.push({name:'login'})
      },

      ievent(dataInfo,items) {
        this.dataInfo = dataInfo;
        this.items = items;
      },
      //添加
      add() {
        this.dataInfo.ok = true;
        this.dataInfo.type = "DDL";
        this.dataInfo.source = "";
        this.dataInfo.activated = "0";
        this.dataInfo.client_code = this.selected;
        this.dataInfo.token = localStorage.getItem('token');
        this.dataInfo.title = "添加";
      },
      //更新
      update(item) {
        this.dataInfo.ok = true;
        this.dataInfo.type = item.sync_type;
        this.dataInfo.source = item.sync_source;
        this.dataInfo.activated = item.activated;
        this.dataInfo.client_code = this.selected;
        this.dataInfo.id = item.id_action;
        this.dataInfo.token = localStorage.getItem('token');
        this.dataInfo.title = "更新";
      },
      //删除
      cancel(item) {
        this.dataInfo.ok = true;
        this.dataInfo.client_code = item.client_code;
        this.dataInfo.action_id = item.id_action;
        this.dataInfo.token = localStorage.getItem('token');
        this.dataInfo.title = "删除";
      }   
    },
    mounted() {
      this.getContent()
      this.user_name = localStorage.getItem('user_name')
    }
  }
</script>

<style scoped>
  .home {
    height:100%;
    width:100%;
  }
  .header {
    height: 36px;
    line-height:36px;
    border-bottom: 1px solid #191970;
    background-color: #185089;
    color: #FFFFFF;
  }
  .content-con {
    height: 100%;
    background: linear-gradient(#185089, #66AAEB);
    background: -webkit-linear-gradient(#185089, #66AAEB); 
    background: -o-linear-gradient(#185089, #66AAEB); 
    background: -moz-linear-gradient(#185089, #66AAEB);
    padding: 15px 0;
  }
  .name,.out {
    margin-left:10px;
  }
  .out {
    cursor: pointer;
  }
  .option-con {
    overflow: hidden;
    text-align: center;
    height: 40px;
    line-height: 40px;
  }
  .btn-con{
    display: inline;
  }
  .select-title{
    margin-left: -600px;
    font-size:20px;
    color: #FFFFFF;
  }
  .client-con {
    height: 30px;
    width: 130px;
    font-size: 20px;
    text-align: center;
    padding:3px 0;
    /*margin-left: -622px;*/
  }
  .add-con {
    font-size: 20px;
    padding: 0 5px;
    border: 1px solid #41708A;
    background-color: #87CEFA;
    border-radius: 3px;
    cursor: pointer;
  }
  table {
    width:900px;
    text-align: center;
    border: 1px solid;
    border-collapse: collapse;
    margin: 0 auto;
  }

  .table-title {
    background-color: #FFF3D1;
  }
  .table-title th {
    border: 1px solid #999999;
    padding: 5px 5px;
  }
  .table-title :nth-child(1){
    width:10%;
  }
  .table-title :nth-child(3){
    width: 10%;
  }
  .table-title :nth-child(4){
    width: 15%;
  }
  .table-content td {
    border: 1px solid #999999;
    padding: 3px 5px;
  }

  .table-content :nth-child(1){
    width: 10%;
  }
  .table-content :nth-child(2){
    text-align: left;
  }
  .table-content :nth-child(3){
    width: 10%;
  }
  .table-content :nth-child(4){
    width: 7%;
  }
  .table-content :nth-child(4){
    width: 8%;
  }
  tr {
    background-color: #FFFFFF;
  }
  tr:nth-child(2n) {
    background-color: #FEFBEE;
  }

  .clarity {
    height:100%;
    width:100%;
    background-color: #aaa;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
  }

  .tips-con {
    position:fixed;
    z-index: 30;
    width: 400px;
    height: 240px;
    background-color: #fff;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
  }
  .tips-header{
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    text-align: center;
    border-bottom: 1px solid;
    background-color: #185089;
    color:#FFFFFF;
  }
  .tips-body{
    height: 90px;
    line-height: 90px;
    text-align: center;
    font-size: 20px;
  }
  .tips-footer{
    text-align: center;
    padding: 10px 0;
  }
  .confirm-btn {
    font-size: 18px;
    padding:3px 8px;
    border: 1px solid #41708A;
    border-radius: 5px;
    background-color: #87CEFA;
    cursor: pointer;
  }
  .update {
    border: 1px solid #FFDEAD;
    background-color: #FFEBCD;
    border-radius: 3px;
    padding: 0 8px;
    cursor: pointer;
  }
  .cancel {
    border: 1px solid #D3D3D3;
    background-color: #DCDCDC;
    border-radius: 3px;
    padding: 0 8px;
    cursor: pointer;
  }

</style>